<template>
  <div class="test-form-container">
    <h2>表单编辑器测试</h2>
    <div id="test-form-editor"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { FormEditor } from '@bpmn-io/form-js-editor';
import '@bpmn-io/form-js-editor/dist/assets/form-js-editor.css';
import '@bpmn-io/form-js/dist/assets/form-js.css';

onMounted(() => {
  console.log('TestFormEditor mounting...');
  
  try {
    const container = document.getElementById('test-form-editor');
    if (!container) {
      console.error('Container not found');
      return;
    }

    console.log('Container dimensions:', container.clientWidth, 'x', container.clientHeight);
    
    const editor = new FormEditor(container, {
      container
    });

    console.log('FormEditor instance created');
    
    const schema = {
      type: 'default',
      components: [
        {
          type: 'text',
          key: 'header',
          label: '表单编辑器测试'
        },
        {
          type: 'textField',
          key: 'testField',
          label: '测试字段'
        }
      ]
    };

    editor.importSchema(schema)
      .then(() => {
        console.log('Schema imported successfully');
      })
      .catch(err => {
        console.error('Schema import failed:', err);
      });
  } catch (error) {
    console.error('FormEditor initialization failed:', error);
  }
});
</script>

<style scoped>
.test-form-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

#test-form-editor {
  flex: 1;
  min-height: 500px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  /* 确保编辑器正确显示的关键样式 */
  display: flex;
  flex-direction: column;
}

/* 确保编辑器子元素也能正确显示 */
#test-form-editor > * {
  flex: 1;
  min-height: 100%;
  width: 100%;
}
</style>